<template>
	<view class="agentWorkOrderList">
		<view class="hearderChange">
			<query-layout @date-change="dateChange"></query-layout>
		</view>
		<view>
			<scroll-view scroll-y="true" class="scrollView listCon" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="scroll">
				<view class="listItemCard" v-for="(item,index) in list" :key="index">
					<!-- :key="item.OID" -->
					<view class="listItemCon" @click="itemClick(item)">
						<view class="listItemIconCon"><text class="cuIcon-edit listItemIcon"/></view>
						<view class="listItemContentCon">
							<!-- <view style="margin-bottom:8px" class="listItemTitle">订单编号：{{ item.serviceNo }}</view> -->
							<view class="listItemTimeCon">
								<text class="cuIcon-calendar listItemContentIcon padding-right-xs"></text>
								订单日期:{{ formatProductDate(item.created) }}
							</view>
							<view class="listItemAddressCon">
								<text class="cuIcon-community listItemContentIcon padding-right-xs"></text>
								手机号:{{ item.receiverMobile }}
							</view>
							<view class="listItemNameCon">
								<view>
									<text class="cuIcon-pay listItemContentIcon padding-right-xs"></text>
									<!-- 金额:{{ Number(item.goodsAmount).toFixed(2) }} -->
									金额:{{ Number(item.paid).toFixed(2) }}
										
								</view>
								<view>
									<text style="margin-left:35px" class="cuIcon-sort listItemContentIcon padding-right-xs"></text>
									<!-- {{ item.serviceSegmentation | serviceTypeDict }} -->
									{{item.statusStr}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty margin-top="12"  :show="listLength == 0" mode="data"></u-empty>
			</scroll-view>
		</view>
		<view>
		<uni-pagination 
		:current="pageIndex"
		:total="total" 
		:page-size="pageSize" 
		prev-text="上一页" 
		next-text="下一页" 
		@change="pageChange" />
		</view>
	</view>
</template>

<script>
import queryMimax from '../eleAccount/mixin/queryMimax.js';
import { mapActions } from 'vuex';
import qs from 'qs';
import queryLayout from '../eleAccount/components/queryLayout/queryLayout.vue';
export default {
  components: { queryLayout },
  mixins:[queryMimax],
	data() {
		return {
			list: [],
			originList:[],
			pageIndex: 1,
			pageSize: 10,
			total: 0,
			startTime:'',
			endTime:'',
			search: {
				time: 0,
				search: '',
				status: 0
			},
			scrollTop: 0,
			old: { scrollTop: 0 },
			pageReady: false
		};
	},
	computed: {
		accountType() {
			return this.$store.state.user.userInfo ? this.$store.state.user.userInfo.accountType : null;
		},
		listLength() {
			return this.list.length;
		}
	},
	onShow() {
		this.getList();
		// this.webUserInit()
		// 	.then(res => {
		// 		console.log(res);
		// 		if (res && res.No) {
		// 			this.getList();
		// 			return;
		// 		} else {
		// 			return this.loginByNo({
		// 				no: this.$store.state.user.userInfo.No
		// 			});
		// 		}
		// 	})
		// 	.then(res => {
		// 		console.log(res);
		// 		if (res && res.code == '000000') {
		// 			this.getList();
		// 		}
		// 	})
		// 	.catch(err => {
		// 		console.log(err);
		// 	});
	},
	onHide() {
		this.pageReady = false;
	},
	onReady(){
		this.getList();
	},
	methods: {
		...mapActions({
			webUserInit: 'user/webUserInit',
			loginByNo: 'user/loginByNo',
			yzQueryPageList:'agent/yzQueryPageList',
		}),
		// 日期选择
		dateChange(e) {
			if (e.startDate && e.endDate) {
				let originList = this.originList;
				console.log(23);
				console.log(originList);
				let listCache = [];
				let startTimestamp = new Date(e.startDate.replace(/\-/g, '/')).getTime();
				let endTimestamp = new Date(e.endDate.replace(/\-/g, '/')).getTime() + 86400000;
				originList.forEach(e => {
					if (e.created) {
						let created = new Date(e.created.replace(/\-/g, '/')).getTime();
						if (startTimestamp <= created && created <= endTimestamp) {
							listCache.push(e);
						}
					}
				});
				this.startTime=e.startDate;
				this.endTime=e.endDate;
				this.list = JSON.parse(JSON.stringify(listCache));
				this.getList();
			}
		},
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		// pageChange(obj) {
		// 	console.log(obj);
		// 	this.scrollTop = this.old.scrollTop;
		// 	this.$nextTick(function() {
		// 		this.scrollTop = 0;
		// 	});
		// 	this.getList(obj.current);
		// },
		pageChange(params) {
			this.pageIndex=params.current;
			var obj=this.pageIndex;
			// var obj={ pageIndex:this.pageIndex,type:this.type}
			this.getList(obj);
		},
		getList() {
			this.yzQueryPageList({
				page:this.pageIndex,
				limit: this.pageSize,
				search: this.search.time,
				startTime:this.startTime,
				endTime:this.endTime,
				teamNo:this.$store.state.user.userInfo.teamNo,
			})
			.then(res=>{
				if(res&&res.code==0){
					let originList=[];
					res.data.list.forEach(e=>{
						originList.push(e);
					})
					originList.sort((a,b)=>{
						if(a.created&&b.created){
							return new Date(b.created.replace(/\-/g, '/')).getTime() - new Date(a.created.replace(/\-/g, '/')).getTime();
						}else if(a.created){
							return -1;
						}else{
							return 1;
						}
					})
					this.total = res.data.totalRow;
					this.originList=originList;
					this.list=JSON.parse(JSON.stringify(originList));
				}
			})
			.catch(err=>{
				console.log(err);
				console.log(123);
			})
		},
		searchChange(e) {
			this.pageIndex = 1;
			this.search.time=e.target.value;
			this.$nextTick(() => {
				this.getList();
			});
		},
		
		itemClick(item) {
			console.log(item);
			console.log(item.srcTids);
			uni.navigateTo({
				url: `/agentPages/agent/acountFansDetail?tid=${item.srcTids}`,
			});
		}
	}
};
</script>

<style lang="less">
@contentFontSize: 24rpx;
@primaryColor: #264e86;
.agentWorkOrderList {
	overflow: hidden;
	.hearderChange{
		background-color:#000;
		height:60px;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.searchButton{
		width:55px;
		height: 25px;
		border-radius:5px;
		background-color:black;
	}
	.scrollView {
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - (74rpx + 90rpx) - 42px);
		/* #endif */
	}
	.headPickerCon {
		padding: 12rpx;
		text-align: center;
	}
	.listCon {
		background-color: #eee;
		padding: 12rpx;
	}
	.listItemCard {
		margin-bottom: 12rpx;
		background-color: white;
		padding: 24rpx;
		.listItemCon {
			display: flex;
			padding-top: 8rpx;
			.listItemIconCon {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 16rpx;
				.listItemIcon {
					font-size: 60rpx;
				}
			}
			.listItemContentCon {
				flex: 1;
				padding: 0 8rpx;
				.listItemContentIcon {
					color: @primaryColor;
				}
				.listItemTitle {
					font-size: 30rpx;
					color: @primaryColor;
				}
				.listItemNameCon {
					display: flex;
					align-items: center;
					font-size: @contentFontSize;
					padding: 6rpx 0;
					view {
						flex: 1;
					}
				}
				.listItemAddressCon {
					font-size: @contentFontSize;
					padding-bottom: 6rpx;
				}
				.listItemTimeCon {
					font-size: @contentFontSize;
					padding-bottom: 6rpx;
				}
			}
			.listItemStatusCon {
				font-size: 26rpx;
			}
		}
	}
}
</style>
